<template>
    <div class="doc-panel">
        <div class="doc-panel-title">
            <div class="doc-panel-title--text">分类</div>
            <el-button v-hasPermi="['service:servePool:editGroup']" class="doc-panel-title--btn" type="primary" size="mini" @click="onTriggeEdit">{{ isEdit ? '关闭编辑' : '编辑' }}</el-button>
        </div>
        <div class="doc-panel-content">
            <div class="doc-panel-content--search">
                <el-input placeholder="输入需要查找的分类" v-model="keyword" suffix-icon="el-icon-search" clearable></el-input>
            </div>
            <div class="doc-panel-content--list" v-loading="loading">
                <div class="doc-panel-item" v-for="item in querySearch(keyword)" :key="item.id">
                    <div class="doc-panel-item--label">
                        <el-input v-if="item.isEdit" v-model=" item.groupName" @change="item.isChange = true"></el-input>
                        <el-button v-else plain :disabled="isEdit" size="mini" @click="onClickCategory(item)">{{ item.groupName }}</el-button>
                    </div>
                    <div class="doc-panel-item--toolbar" v-if="isEdit">
                        <template v-if="!item.isEdit">
                            <svg-icon icon-class="tree-edit" style="color:#268EF9; margin-right:6px;" @click="edit(item)"></svg-icon>
                            <el-popconfirm title="确认删除吗？" @confirm="remove(item)">
                                <svg-icon icon-class="tree-minus" style="color:#FF414A;" slot="reference"></svg-icon>
                            </el-popconfirm>
                        </template>

                        <template v-else>
                            <svg-icon icon-class="yes-sl" class="doc-panel-btn doc-panel-btn--confirm" @click="confirm(item)"></svg-icon>
						    <svg-icon icon-class="no-sl" class="doc-panel-btn doc-panel-btn--cancel" @click="cancel(item)"></svg-icon>
                        </template>
                    </div>
                </div>
                <div class="doc-panel-item" v-if="!isEdit">
                    <el-button size="mini" @click="onClickCategory({})">全部</el-button>
                </div>
                <!-- 新增按钮 -->
                <div class="doc-panel-item" v-if="isEdit">
                    <el-button :disabled="isAddNew" type="primary" size="mini" @click="addCategory">新增</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getApiCategories, addApiCategory, editApiCategory, deleteApiCategoryInfo} from "@/api/dataManagement/system/group"

export default {
    name: "DocCategoryPanel",
    data() {
        return {
            loading: false,
            keyword: "",
            categories: [],
            isAddNew: false, // 是否新增模块
            isEdit: false,
            isCurrentEdit: '', // 判断当前是有有其他进行中的编辑，同时间只能新增或编辑一个
        };
    },
    created() {
        this.getApiCategories()
    },
    methods: {
        querySearch(queryString) {
            var categories = this.categories;
            return queryString ? categories.filter(this.createFilter(queryString)) : categories;
        },
        createFilter(queryString) {
            return (category) => {
                return (category.groupName.toLowerCase().indexOf(queryString.toLowerCase()) != -1);
            };
        },
        onTriggeEdit() {
            this.isEdit = !this.isEdit
            if (!this.isEdit) {
                for (let i = 0; i < this.categories.length; i++) {
                    const item = this.categories[i];
                    item.isEdit = false
                }

                let list = this.categories.filter(item => item.isNew)
                if (list.length) {
                    this.getApiCategories()
                }
            }
        },
        getApiCategories() {
            if (this.loading) return
            this.loading = true

            getApiCategories({ pageSize: 65535 }).then((res) => {
                if (res.code == 200) {
                    let categories  = res.rows
                    for (let i = 0; i < categories.length; i++) {
                        const item = categories[i];
                        item.isEdit = false
                        item.isChange = false
                    }
                    this.categories = categories
                    this.isAddNew = false
                    this.$emit('refresh', this.categories)
                    setTimeout(() => {
                        this.loading = false
                    }, 150);
                }
            }).catch(() => {
                this.loading = false
            })
        },
        addCategory() {
            let list = this.categories.filter(item => item.isNew)
            if (list.length) return

            this.isAddNew = true

            this.categories.push({
                groupName: '',
                id: '',
                delStatus: '0',
                isEdit: true,
                isChange: false,
                isNew: true
            })
        },
        onClickCategory(row) {
            console.log(row)
            if (row) {
                this.$emit('click', row)
            }
        },
        // 开启分组条目编辑状态
        edit(row) {
            if (row) {
                row.isEdit = !row.isEdit
            }
        },
        // 关闭分组条目编辑状态
        cancel(row) {
            if (row) {
                if (row.isNew) {
                    let index = this.categories.findIndex(item => item.isNew)
                    if (index !== -1) {
                        this.categories.splice(index, 1)
                        this.isAddNew = false
                    }
                } else {
                    row.isEdit = !row.isEdit
                }

                if (row.isChange) {
                    this.getApiCategories()
                }
            }
        },
        remove(row) {
            deleteApiCategoryInfo(row.id).then(res => {
                if (res.code == 200) {
                    let index = this.categories.findIndex(item => row.id)
                    if (index !== -1) this.categories.splice(index, 1)
                    this.$emit('refresh', this.categories)
                }
            }).catch(() => {})
        },
        confirm(row) {
            if (!row.groupName.length) {
                this.msgError('分组名称不能为空')
                return
            }
            if (row.groupName.length > 15) {
                this.msgError('不能超过15个字符串')
                return
            }
            if (row.isNew) {
                let params = {
                    groupName: row.groupName
                }
                addApiCategory(params).then(res => {
                    if (res.code == 200) {
                        this.isAddNew = false
                        this.isEdit = false
                        this.getApiCategories()
                        this.msgSuccess('新增成功')
                    } else {
                        this.msgError(res.msg)
                    }
                }).catch(() => {})
            } else {
                let params = {
                    id: row.id,
                    groupName: row.groupName,
                }
                editApiCategory(params).then(res => {
                    if (res.code == 200) {
                        this.isAddNew = false
                        this.isEdit = false
                        this.getApiCategories()
                        this.msgSuccess('更新成功')
                    } else {
                        this.msgError(res.msg)
                    }
                }).catch(() => {})
            }
        },
    }
};
</script>

<style lang="scss" scoped>
.doc-panel {
    width: 100%;
    height: 100%;
    user-select: none;

    &-title {
        font-size: 16px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        &--text {
            display: flex;
            align-items: center;
            color: #606266;

            &::before {
                content: "";
                width: 4px;
                height: 24px;
                display: inline-block;
                background: #1183f8;
                margin-right: 8px;
            }
        }

        &--btn {
            padding: 4px 15px;
        }
    }

    &-item {
        margin: 8px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-button {
            width: 100%;
        }

        &--label {
            flex: 1;
            overflow: hidden;

            ::v-deep {
                .el-input__inner {
                    height: 30px;
                    line-height: 30px;
                }
            }
        }

        &--toolbar {
            width: 50px;
            font-size: 18px;
            flex-shrink: 0;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            & > svg,
            & > span {
                height: 18px;
            }
        }
    }

    &-btn {
        cursor: pointer;

        &--confirm {
            height: 22px !important;
            margin-left: 6px;
            font-size: 22px;
            color:#268EF9; 
        }

        &--cancel {
            height: 22px !important;
            font-size: 22px;
        }
    }
}
</style>
